<!-- 课程考核管理:管理员:课程考核管理:成绩管理:互联网选修课成绩审核 -->
<template>
  <div>
    <div>
      <el-form label-suffix="：" label-position="left" style="display: flex; margin-bottom: -10px;">
        <el-form-item label-width="55px" label="年级">
          <el-select v-model="queryForm.grade" size="mini" clearable placeholder="请选择年级" style="margin: 0 20px 0 -15px;"
            @change="handleChangeGrade">
            <el-option v-for="(item, index) in gradeList" :key="index" :label="item.xqszxn" :value="item.xqszxn" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="学期">
          <el-select v-model="queryForm.semester" size="mini" clearable placeholder="请选择学期"
            style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="队别">
          <el-select v-model="queryForm.team" size="mini" clearable placeholder="请选择队别" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in teamList" :key="index" :value="item.deptName" :label="item.deptName" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="专业班次">
          <el-select v-model="queryForm.class" size="mini" clearable placeholder="请选择专业班次"
            style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in classList" :key="index" :value="item.id" :label="item.className" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="姓名">
          <el-input v-model="queryForm.studentName" size="mini" clearable placeholder="请输入姓名"
            style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <el-form-item label-width="55px" label="学号">
          <el-input v-model="queryForm.studentNo" size="mini" clearable placeholder="请输入学号"
            style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <el-form-item label-width="85px" label="课程名称">
          <el-input v-model="queryForm.courseName" size="mini" clearable placeholder="请输入课程名称"
            style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <div class="button-style"
          style="width: 90px; margin: 6px 0 0 21px; background: #f1f8fe; border: 1px solid #51aef6;"
          @click="handleSearch">
          <img src="@/assets/assessment/icon-search.png" alt="" />
          <span style="font-size: 14px; color: #51aef6;">查询</span>
        </div>
      </el-form>
    </div>
    <div style="display: flex; justify-content: flex-end;">
      <div class="button-style"
        style="width: 100px; margin: 6px 0 0 21px; background: #f1f8fe; border: 1px solid #51aef6;"
        @click="handleBatchPass">
        <img src="@/assets/assessment/icon-finish.png" alt="" />
        <span style="font-size: 14px; color: #51aef6;">批量通过</span>
      </div>
      <div class="button-style"
        style="width: 100px; margin: 6px 0 0 21px; background: #FFEEEF; border: 1px solid #FA533C;"
        @click="handleBatchRepulse">
        <img src="@/assets/assessment/icon-close.png" alt="" />
        <span style="font-size: 14px; color: #FA533C;">批量打回</span>
      </div>
    </div>
    <div style="margin: 15px auto;">
      <el-table border ref="scoreTable" :data="tableData" @selection-change="handleSelect" class="xpaas-table-class"
        row-class-name="xpaas-row-class" cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class" header-cell-class-name="xpaas-header-cell-class">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="state" label="状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span :style="scope.row.state === '2' ? 'color:#51AEF6' : 'color:#FA533C'">{{ scope.row.state === '0' ?
                '待队长审核' : scope.row.state === '1' ? '待管理员审批' : scope.row.state === '2' ? '已通过' : '已驳回'
            }}</span>
            <!-- if (item.state === '0') {
              item.stateName = '待队长审批'
            } else if (item.state === '1') {
              item.stateName = '待管理员审批'
            } else if (item.state === '2') {
              item.stateName = '已通过'
            } else {
              item.stateName = '已驳回'
            } -->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: space-around;">
              <div v-if="scope.row.editShow" class="button-style"
                style="width: 28px; background: #F1FFFA; border: 1px solid #04C670;" @click="handleEdit(scope.row)">
                <img src="@/assets/assessment/icon-plan-record-detail.png" style="margin-right: 0;" alt="" />
              </div>
              <div v-if="scope.row.passShow" class="button-style"
                style="width: 28px; background: #f1f8fe; border: 1px solid #51aef6;" @click="handlePass(scope.row)">
                <img src="@/assets/assessment/icon-finish.png" style="margin-right: 0;" alt="" />
              </div>
              <div v-if="scope.row.repulseShow" class="button-style"
                style="width: 28px; background: #FFEEEF; border: 1px solid #FA533C;" @click="handleRepulse(scope.row)">
                <img src="@/assets/assessment/icon-close.png" style="margin-right: 0;" alt="" />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="xueqi" label="学期" show-overflow-tooltip align="center" />
        <el-table-column prop="studentdui" label="队别" show-overflow-tooltip align="center" />
        <el-table-column prop="grade" label="年级" show-overflow-tooltip align="center" />
        <el-table-column prop="zybc" label="专业班次" show-overflow-tooltip align="center" />
        <el-table-column prop="studentname" label="姓名" show-overflow-tooltip align="center" />
        <el-table-column prop="studentcode" label="学号" show-overflow-tooltip align="center" />
        <el-table-column prop="sex" label="性别" show-overflow-tooltip align="center" />
        <el-table-column prop="ptname" label="平台名称" show-overflow-tooltip align="center" />
        <el-table-column prop="xxkhlwmc" label="互联网选修课名称" show-overflow-tooltip align="center" />
        <el-table-column prop="xuehour" label="学时" show-overflow-tooltip align="center" />
        <el-table-column prop="score" label="成绩" show-overflow-tooltip align="center" />
        <el-table-column label="成绩证明截图" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <div style="color: blue; cursor: pointer;" @click="handleViewImage(scope.row)">
              {{ scope.row.scorejietuname }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="guideitemrank" label="其他证明材料" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <div class="button-style" style="width: 75px; background: #EFEBFF; border: 1px solid #624CC5;"
              @click="handleDownload(scope.row)">
              <span style="font-size: 14px; color: #624CC5;">下载文件</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="bz" label="备注" show-overflow-tooltip align="center" />
      </el-table>
    </div>
    <div class="button-style">
      <img src="@/assets/assessment/icon-export.png" alt="" />
      <download-excel :data="tableData" :fields="jsonFields" type="xls" name="互联网选修课信息.xls"
        style="font-size: 14px; color: #f3b815;">
        <span>导出Excel</span>
      </download-excel>
    </div>
    <div style="float: right; padding-bottom: 15px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10"
        layout="total, sizes, prev, pager, next, jumper" :total="total" style="padding: 0;">
      </el-pagination>
    </div>
    <el-dialog title="信息工程大学洛阳校区学员成绩分布情况" :visible.sync="dialogShow" width="1200px">
      <el-form class="my-form-container" style="width: 100%; height: 100%;">
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">平台名称</div>
            <span>{{ dialogForm.ptname }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">互联网选修课名称</div>
            <span>{{ dialogForm.xxkhlwmc }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">学时</div>
            <span>{{ dialogForm.xuehour }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">学期</div>
            <span>{{ dialogForm.xueqi }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">队别</div>
            <span>{{ dialogForm.studentdui }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">年级</div>
            <span>{{ dialogForm.grade }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">专业班次</div>
            <span>{{ dialogForm.zybc }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">学号</div>
            <span>{{ dialogForm.studentcode }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">姓名</div>
            <span>{{ dialogForm.studentname }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">性别</div>
            <span>{{ dialogForm.sex }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">成绩</div>
            <el-input v-model="dialogForm.score" size="mini" placeHolder="请输入成绩" style="margin: 15px 30px;" />
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">成绩证明截图</div>
            <el-upload class="uploadStyle" action="" :http-request="handleUpload" accept=".jpg" :limit="1"
              :on-exceed="handleExceed" :file-list="fileList">
              <el-button size="small" type="primary">选择图片</el-button>
            </el-upload>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">其他证明材料</div>
            <el-upload class="uploadStyle" action="" :http-request="handleUpload1" :on-exceed="handleExceed" :limit="1">
              <el-button size="small" type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">备注</div>
            <el-input v-model="dialogForm.bz" size="mini" placeHolder="请输入备注" style="margin: 15px 30px;" />
          </el-form-item>
        </div>
      </el-form>
      <div style="display: flex; justify-content: center;">
        <div class="button-style"
          style="width: 60px; margin: 6px 0 0 21px; background: #FFF6F0; border: 1px solid #E9B535;"
          @click="handleSave">
          <span style="font-size: 14px; color: #E9B535;">保存</span>
        </div>
        <div class="button-style"
          style="width: 100px; margin: 6px 0 0 21px; background: #f1f8fe; border: 1px solid #51aef6;"
          @click="handleSubmit">
          <span style="font-size: 14px; color: #51aef6;">保存并提交</span>
        </div>
        <div class="button-style"
          style="width: 60px; margin: 6px 0 0 21px; background: #FFEEEF; border: 1px solid #FA533C;"
          @click="handleCancel">
          <span style="font-size: 14px; color: #FA533C;">取消</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getStore } from '@/util/store.js'
import { getFileStream, downloadFile, reqGetXqList, reqXydList, reqCheckYearList, reqZybcList, queryElectiveList, querySemesterByYear, updateElectiveState, updateElectiveInfo, queryElectiveDetail, uploadImage, uploadFile } from '@/api/admin1/check'
export default {
  data() {
    return {
      roleId: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      dialogShow: false,
      fileList: [],
      fileList1: [],
      queryForm: {
        semester: '',
        team: '',
        grade: '',
        class: '',
        studentName: '',
        studentNo: '',
        courseName: ''
      },
      dialogForm: {
        ptname: '',
        xxkhlwmc: '',
        xuehour: '',
        xueqi: '',
        studentdui: '',
        grade: '',
        zybc: '',
        studentcode: '',
        studentname: '',
        sex: '',
        score: '',
        scorejietu: '',
        tqzmcl: '',
        scorejietuname: '',
        tqzmclfilename: '',
        bz: ''
      },
      ids: '',
      semesterList: [],
      teamList: [],
      gradeList: [],
      classList: [],
      tableData: [],
      selectedRows: [],
      jsonFields: {
        状态: 'stateName',
        学期: 'xueqi',
        队别: 'studentdui',
        年级: 'grade',
        专业班次: 'zybc',
        姓名: 'studentname',
        学号: 'studentcode',
        性别: 'sex',
        平台名称: 'ptname',
        互联网选修课名称: 'xxkhlwmc',
        学时: 'xuehour',
        成绩: 'score',
        成绩证明: 'scorejietuname',
        备注: 'bz'
      }
    }
  },
  mounted() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
      }
    })
    reqXydList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.teamList = res.data.data
      }
    })
    reqCheckYearList().then((res) => {
      if (res.data.data && res.data.data.length > 0) {
        this.gradeList = res.data.data
      }
    })
    reqZybcList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.classList = res.data.data
      }
    })
    this.handleSearch()
  },
  methods: {
    //文件限制传一个的提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    handleChangeGrade: function (val) {
      this.queryForm.semester = ''
      if (val === '') {
        reqGetXqList().then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.semesterList = res.data.data
          }
        })
      } else {
        querySemesterByYear(val).then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.semesterList = res.data.data
          }
        })
      }
    },
    handleSearch: function () {
      this.tableData = []
      this.total = 0
      const params = {
        xueqi: this.queryForm.semester,
        studentdui: this.queryForm.team,
        grade: this.queryForm.grade,
        zybc: this.queryForm.class,
        studentname: this.queryForm.studentName,
        studentcode: this.queryForm.studentNo,
        xxkhlwmc: this.queryForm.courseName
      }
      queryElectiveList(params, this.pageNo, this.pageSize).then(res => {
        if (res.data.data && res.data.data.records.length > 0) {
          this.tableData = res.data.data.records
          this.tableData.forEach(item => {
            item.editShow = item.state === '-1' && this.roleId === '1490880728751644674'
            item.passShow = (item.state === '0' && this.roleId === '1490880728751644674') || (item.state === '1' && this.roleId === '1490859421955674114')
            item.repulseShow = (item.state === '0' && this.roleId === '1490880728751644674') || (item.state === '1' && this.roleId === '1490859421955674114')
          })
        }
      })
    },
    handleBatchPass: function () {
      if (this.selectedRows.length > 0) {
        let list = []
        this.selectedRows.forEach(item => {
          list.push({ id: item.id, state: parseInt(item.state) + 1 })
        })
        updateElectiveState(list).then(res => {
          if (res.data.code === 200) {
            this.handleSearch()
            this.$message({
              message: '成绩通过成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '成绩通过失败！',
              type: 'warning'
            })
          }
        })
      } else {
        this.$message({
          message: '请选择需要通过的数据！',
          type: 'error'
        })
      }
    },
    handleBatchRepulse: function () {
      if (this.selectedRows.length > 0) {
        let list = []
        this.selectedRows.forEach(item => {
          list.push({ id: item.id, state: '-1' })
        })
        updateElectiveState(list).then(res => {
          if (res.data.code === 200) {
            this.handleSearch()
            this.$message({
              message: '成绩打回成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '成绩打回失败！',
              type: 'warning'
            })
          }
        })
      } else {
        this.$message({
          message: '请选择需要打回的数据！',
          type: 'error'
        })
      }
    },
    handleEdit: function (row) {
      queryElectiveDetail(row.id).then(res => {
        if (res.data.code === 200) {
          this.dialogForm = res.data.data
          if (res.data.data.scorejietu !== '') {
            this.fileList = [{
              name: res.data.data.scorejietuname,
              url: res.data.data.scorejietu
            }]
          }
          if (res.data.data.tqzmcl !== '') {
            this.fileList1 = [{
              name: res.data.data.tqzmclfilename,
              // url: res.data.data.tqzmcl
            }]
          }
        }
      })
      this.dialogShow = true
    },
    handlePass: function (row) {
      let list = []
      list.push({ id: row.id, state: parseInt(row.state) + 1 })
      updateElectiveState(list).then(res => {
        if (res.data.code === 200) {
          this.handleSearch()
          this.$message({
            message: '成绩通过成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '成绩通过失败！',
            type: 'warning'
          })
        }
      })
    },
    handleRepulse: function (row) {
      let list = []
      list.push({ id: row.id, state: '-1' })
      updateElectiveState(list).then(res => {
        if (res.data.code === 200) {
          this.handleSearch()
          this.$message({
            message: '成绩打回成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '成绩打回失败！',
            type: 'warning'
          })
        }
      })
    },
    handleDownload: function (row) {
      downloadFile(row.tqzmcl).then(res => {
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = row.tqzmclfilename
        document.body.appendChild(downloadElement)
        downloadElement.click()
        window.URL.revokeObjectURL(href)
      })
    },
    handleViewImage: function (row) {
      downloadFile(row.scorejietu).then(res => {
        const blob = new Blob([res.data], { type: 'application;charset=utf-8' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = row.scorejietuname
        document.body.appendChild(downloadElement)
        downloadElement.click()
        window.URL.revokeObjectURL(href)
      })
    },
    handleSelect: function (rows) {
      this.selectedRows = rows
      let showMsg = false
      for (let index = 0; index < rows.length; index++) {
        if (!rows[index].passShow) {
          this.$refs.scoreTable.toggleRowSelection(rows[index], false)
          showMsg = true
        }
      }
      if (showMsg) {
        this.$message({
          message: '存在无法批量处理的数据，已自动取消勾选！',
          type: 'warning'
        })
      }
    },
    handleSave: function () {
      if (this.dialogForm.score === '') {
        this.$message({
          message: '请输入成绩！',
          type: 'warning'
        })
      } else {
        const params = {
          id: this.dialogForm.id,
          score: this.dialogForm.score,
          bz: this.dialogForm.bz,
          scorejietu: this.dialogForm.scorejietu,
          tqzmcl: this.dialogForm.tqzmcl
        }
        updateElectiveInfo(params).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
            this.dialogShow = false
          } else {
            this.$message({
              message: '保存失败！',
              type: 'warning'
            })
          }
          this.handleSearch()
        })
      }
    },
    handleSubmit: function () {
      if (this.dialogForm.score === '') {
        this.$message({
          message: '请输入成绩！',
          type: 'warning'
        })
      } else {
        const params = {
          id: this.dialogForm.id,
          score: this.dialogForm.score,
          bz: this.dialogForm.bz,
          scorejietu: this.dialogForm.scorejietu,
          tqzmcl: this.dialogForm.tqzmcl,
          state: '0'
        }
        updateElectiveInfo(params).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '提交成功！',
              type: 'success'
            })
            this.dialogShow = false
          } else {
            this.$message({
              message: '提交失败！',
              type: 'warning'
            })
          }
          this.handleSearch()
        })
      }
    },
    handleUpload: function (file) {
      let formData = new FormData();
      formData.append('file', file.file);
      uploadImage(formData).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.dialogForm.scorejietu = res.data.data
          this.dialogForm.scorejietuname = res.data.data.split(';')[1]
          this.$message({
            message: '图片上传成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片上传失败！',
            type: 'warning'
          })
        }
      })
    },
    handleUpload1: function (file) {
      let formData = new FormData();
      formData.append('file', file.file);
      uploadFile(formData).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.dialogForm.tqzmcl = res.data.data
          this.dialogForm.tqzmclfilename = res.data.data.split(';')[1]
          this.$message({
            message: '文件上传成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '文件上传失败！',
            type: 'warning'
          })
        }
      })
    },
    handleCancel: function () {
      this.dialogShow = false
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    }
  }
};
</script>
<style lang="less" scoped>
@fontFamily: "Microsoft YaHei";

.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;

  ::v-deep div.el-table__header-wrapper {
    table.el-table__header {
      thead {
        tr.xpaas-header-row-class {
          padding: 0;
          height: 60px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: @fontFamily;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;

          th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }

  ::v-deep div.el-table__body-wrapper {
    table.el-table__body {
      tbody {
        tr.xpaas-row-class {
          td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }

          td.xpaas-cell-class {
            height: 60px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;

            div.cell {
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}

.my-form-item {
  width: 50%;
  height: 70px;
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
  margin-bottom: 0;

  >div {
    display: flex;
    height: 100%;

    &:nth-child(2) {
      .my-form-item-label {
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }
    }

    .my-form-item-label {
      width: 220px;
      padding-left: 60px;
      background: rgba(0, 76, 167, 0.1);
      display: flex;
      flex: none;
      align-items: center;
      color: #004CA7;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      border-left: 1px solid rgba(0, 76, 167, 0.39);
      margin-left: -1px;

      .mustW {
        color: red;
      }
    }

    span {
      color: #004CA7;
      margin-left: 30px;
      height: 70px;
      line-height: 70px;
    }
  }
}

.button-style {
  float: left;
  background: #fff6ef;
  border: 1px solid #f3b815;
  width: 110px;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  box-sizing: border-box;

  >img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  >label {
    cursor: pointer;
  }
}

/deep/ .el-form-item__label {
  color: #004ca7;
  font-size: 14px;
}

/deep/ .el-dialog {
  height: 690px;
  overflow-y: hidden;
}

/deep/ .uploadStyle .el-button {
  float: left;
  margin: 20px 30px;
  background: #EFEBFF;
  color: #624CC5;
  border: 1px solid #624CC5;
  width: 90px;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  box-sizing: border-box;
}

/deep/ .uploadStyle .el-upload-list {
  margin-top: -72px;
  margin-left: 150px;
}
</style>
